<!DOCTYPE html>
<html lang="en-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>three.js | 阿飞博客</title>
    <meta name="description" content="Vite & Vue powered static site generator.">
    <link rel="preload stylesheet" href="/Blogs/assets/style.a20661eb.css" as="style">
    <link rel="modulepreload" href="/Blogs/assets/app.2f47ee87.js">
    <link rel="modulepreload" href="/Blogs/assets/Web3D_three.js.md.f20abcae.lean.js">
    
    <link rel="icon" href="/planet.svg">
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-93a960b4><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav" data-v-93a960b4 data-v-0fa0e57d><div class="VPNavBar has-sidebar" data-v-0fa0e57d data-v-be450ad9><div class="container" data-v-be450ad9><div class="title" data-v-be450ad9><div class="VPNavBarTitle has-sidebar" data-v-be450ad9 data-v-6d2fb2d9><a class="title" href="/Blogs/" data-v-6d2fb2d9><!--[--><!--]--><!--[--><img class="VPImage logo" src="/Blogs/planet.svg" alt data-v-6db2186b><!--]--><!--[-->My Study Blog 💓 ❤️‍🔥<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-be450ad9><div class="curtain" data-v-be450ad9></div><div class="content-body" data-v-be450ad9><!--[--><!--]--><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-be450ad9 data-v-bdedfc22><span id="main-nav-aria-label" class="visually-hidden" data-v-bdedfc22>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/Blogs/" data-v-bdedfc22 data-v-f2ec7ecf data-v-a8b5c975><!--[-->主页<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="../whyVitePress/index.html" data-v-bdedfc22 data-v-f2ec7ecf data-v-a8b5c975><!--[-->学习笔记<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-bdedfc22 data-v-96001b6b><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-96001b6b><span class="text" data-v-96001b6b><!----> 文章 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-96001b6b><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-96001b6b><div class="VPMenu" data-v-96001b6b data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-88f937c6><a class="VPLink link" href="/Blogs/article/" data-v-88f937c6 data-v-a8b5c975><!--[-->某一时刻的心得<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-88f937c6><a class="VPLink link" href="/Blogs/article/2022.5.2.html" data-v-88f937c6 data-v-a8b5c975><!--[-->想念月色<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/Blogs/MySqlStudy/MySQL.html" data-v-bdedfc22 data-v-f2ec7ecf data-v-a8b5c975><!--[-->数据库<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/Blogs/Toolweb/" data-v-bdedfc22 data-v-f2ec7ecf data-v-a8b5c975><!--[-->常用网站<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/Blogs/about/" data-v-bdedfc22 data-v-f2ec7ecf data-v-a8b5c975><!--[-->关于<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-be450ad9 data-v-da3f667a><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-da3f667a data-v-0d529b6d data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-0d529b6d><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-0d529b6d><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-be450ad9 data-v-2ab2a029 data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://github.com/SunFei123456" target="_blank" rel="noopener" data-v-f6988cfb data-v-e57698f6><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-be450ad9 data-v-66bb1f24 data-v-96001b6b><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-96001b6b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-96001b6b><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-96001b6b><div class="VPMenu" data-v-96001b6b data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-66bb1f24><div class="item appearance" data-v-66bb1f24><p class="label" data-v-66bb1f24>Appearance</p><div class="appearance-action" data-v-66bb1f24><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-66bb1f24 data-v-0d529b6d data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-0d529b6d><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-0d529b6d><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-66bb1f24><div class="item social-links" data-v-66bb1f24><div class="VPSocialLinks social-links-list" data-v-66bb1f24 data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://github.com/SunFei123456" target="_blank" rel="noopener" data-v-f6988cfb data-v-e57698f6><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-be450ad9 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-93a960b4 data-v-2817d72e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-2817d72e><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-2817d72e><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-2817d72e>Menu</span></button><a class="top-link" href="#" data-v-2817d72e>Return to top</a></div><aside class="VPSidebar" data-v-93a960b4 data-v-c79ccefa><div class="curtain" data-v-c79ccefa></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-c79ccefa><span class="visually-hidden" id="sidebar-aria-label" data-v-c79ccefa> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-c79ccefa><section class="VPSidebarItem level-0 collapsible collapsed" data-v-c79ccefa data-v-983f6b21><div class="item" role="button" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link" data-v-983f6b21 data-v-a8b5c975><!--[--><h2 class="text" data-v-983f6b21>为什么选择vitePress搭建</h2><!--]--><!----></a><div class="caret" role="button" data-v-983f6b21><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-983f6b21><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-983f6b21><!--[--><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../whyVitePress/index.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>介绍</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../whyVitePress/start.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>快速开始</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-c79ccefa><section class="VPSidebarItem level-0 collapsible collapsed" data-v-c79ccefa data-v-983f6b21><div class="item" role="button" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link" data-v-983f6b21 data-v-a8b5c975><!--[--><h2 class="text" data-v-983f6b21>每日记录</h2><!--]--><!----></a><div class="caret" role="button" data-v-983f6b21><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-983f6b21><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-983f6b21><!--[--><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../DailyLife/2023-03.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>2023年三月份</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-c79ccefa><section class="VPSidebarItem level-0 collapsible collapsed" data-v-c79ccefa data-v-983f6b21><div class="item" role="button" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link" data-v-983f6b21 data-v-a8b5c975><!--[--><h2 class="text" data-v-983f6b21>HTML 部分</h2><!--]--><!----></a><div class="caret" role="button" data-v-983f6b21><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-983f6b21><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-983f6b21><!--[--><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../HTML/SemanticTagging.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>语义化标签</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../HTML/Rearrange-and-redraw.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>重排和重绘</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../HTML/index.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>面试系列</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-c79ccefa><section class="VPSidebarItem level-0 collapsible collapsed" data-v-c79ccefa data-v-983f6b21><div class="item" role="button" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link" data-v-983f6b21 data-v-a8b5c975><!--[--><h2 class="text" data-v-983f6b21>CSS 部分</h2><!--]--><!----></a><div class="caret" role="button" data-v-983f6b21><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-983f6b21><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-983f6b21><!--[--><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../CssStudy/boxModel.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>盒子模型</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../CssStudy/boxJuzhong.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>盒子水平居中的方式有哪些</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../CssStudy/flex.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>Flex布局详解</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../CssStudy/CssDaoYing.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>CSS倒影实现</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../CssStudy/CssOptimization.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>CSS优化方式</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-c79ccefa><section class="VPSidebarItem level-0 collapsible collapsed" data-v-c79ccefa data-v-983f6b21><div class="item" role="button" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link" data-v-983f6b21 data-v-a8b5c975><!--[--><h2 class="text" data-v-983f6b21>JS 部分</h2><!--]--><!----></a><div class="caret" role="button" data-v-983f6b21><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-983f6b21><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-983f6b21><!--[--><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../JsStudy/Array.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>数组</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../JsStudy/KonwElType.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>确定js里的数据的类型</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../JsStudy/Fd-and-JieLiu.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>防抖与节流</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../JsStudy/3-7-ObjectDeconstruction.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>ES6 新增 对象解构语法</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-c79ccefa><div class="VPSidebarItem level-0 collapsible collapsed" data-v-c79ccefa data-v-983f6b21><div class="item" role="button" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>AJAX 部分</p><!--]--><!----></a><div class="caret" role="button" data-v-983f6b21><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-983f6b21><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><!----></div></div><div class="group" data-v-c79ccefa><section class="VPSidebarItem level-0 collapsible collapsed" data-v-c79ccefa data-v-983f6b21><div class="item" role="button" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link" data-v-983f6b21 data-v-a8b5c975><!--[--><h2 class="text" data-v-983f6b21>Vue 系列</h2><!--]--><!----></a><div class="caret" role="button" data-v-983f6b21><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-983f6b21><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-983f6b21><!--[--><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../VueStudy/1.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>Vue2和Vue3 的区别</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../VueStudy/Vue.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>Vue2 基础部分的学习</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-c79ccefa><section class="VPSidebarItem level-0 collapsible collapsed" data-v-c79ccefa data-v-983f6b21><div class="item" role="button" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link" data-v-983f6b21 data-v-a8b5c975><!--[--><h2 class="text" data-v-983f6b21>小程序开发系列</h2><!--]--><!----></a><div class="caret" role="button" data-v-983f6b21><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-983f6b21><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-983f6b21><!--[--><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../whyVitePress/introduction.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>语义化标签</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-c79ccefa><section class="VPSidebarItem level-0 collapsible collapsed" data-v-c79ccefa data-v-983f6b21><div class="item" role="button" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link" data-v-983f6b21 data-v-a8b5c975><!--[--><h2 class="text" data-v-983f6b21>第三方库系列</h2><!--]--><!----></a><div class="caret" role="button" data-v-983f6b21><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-983f6b21><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-983f6b21><!--[--><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../JsLibrary/gsap.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>GSAP 绿袜子</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-c79ccefa><section class="VPSidebarItem level-0 collapsible collapsed" data-v-c79ccefa data-v-983f6b21><div class="item" role="button" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link" data-v-983f6b21 data-v-a8b5c975><!--[--><h2 class="text" data-v-983f6b21>Web3D系列</h2><!--]--><!----></a><div class="caret" role="button" data-v-983f6b21><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-983f6b21><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-983f6b21><!--[--><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../Web3D/three.js.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>ThreeJs3D开发</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-c79ccefa><section class="VPSidebarItem level-0 collapsible collapsed" data-v-c79ccefa data-v-983f6b21><div class="item" role="button" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link" data-v-983f6b21 data-v-a8b5c975><!--[--><h2 class="text" data-v-983f6b21>前端常用工具网站</h2><!--]--><!----></a><div class="caret" role="button" data-v-983f6b21><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-983f6b21><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-983f6b21><!--[--><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../Toolweb/index.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>ICON 图标库</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../Toolweb/index.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>前端Ui库</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-c79ccefa><section class="VPSidebarItem level-0 collapsible collapsed" data-v-c79ccefa data-v-983f6b21><div class="item" role="button" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link" data-v-983f6b21 data-v-a8b5c975><!--[--><h2 class="text" data-v-983f6b21>数据库</h2><!--]--><!----></a><div class="caret" role="button" data-v-983f6b21><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-983f6b21><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-983f6b21><!--[--><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../MySqlStudy/MySQL.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>MySql 基础部分</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-c79ccefa><section class="VPSidebarItem level-0 collapsible collapsed" data-v-c79ccefa data-v-983f6b21><div class="item" role="button" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link" data-v-983f6b21 data-v-a8b5c975><!--[--><h2 class="text" data-v-983f6b21>VsCode插件推荐</h2><!--]--><!----></a><div class="caret" role="button" data-v-983f6b21><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-983f6b21><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-983f6b21><!--[--><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../VsCodeChajian/index.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>一些有趣好玩的插件</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-c79ccefa><section class="VPSidebarItem level-0 collapsible collapsed" data-v-c79ccefa data-v-983f6b21><div class="item" role="button" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link" data-v-983f6b21 data-v-a8b5c975><!--[--><h2 class="text" data-v-983f6b21>某一时刻的心得</h2><!--]--><!----></a><div class="caret" role="button" data-v-983f6b21><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-983f6b21><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-983f6b21><!--[--><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../article/index.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>心念 不安</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../article/2022.5.2.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>愿希 君安</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-c79ccefa><section class="VPSidebarItem level-0 collapsible collapsed" data-v-c79ccefa data-v-983f6b21><div class="item" role="button" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link" data-v-983f6b21 data-v-a8b5c975><!--[--><h2 class="text" data-v-983f6b21>学习摄影-拍照</h2><!--]--><!----></a><div class="caret" role="button" data-v-983f6b21><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-983f6b21><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-983f6b21><!--[--><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../PhotoTips/1.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>要掌握的拍照几大技巧</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="../PhotoTips/2.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>拍照简易构图法</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-93a960b4 data-v-0bd490fb><div class="VPDoc has-sidebar has-aside" data-v-0bd490fb data-v-c5936a1e><div class="container" data-v-c5936a1e><div class="aside" data-v-c5936a1e><div class="aside-curtain" data-v-c5936a1e></div><div class="aside-container" data-v-c5936a1e><div class="aside-content" data-v-c5936a1e><div class="VPDocAside" data-v-c5936a1e data-v-cdc66372><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-cdc66372 data-v-5dd9d5f6><div class="content" data-v-5dd9d5f6><div class="outline-marker" data-v-5dd9d5f6></div><div class="outline-title" data-v-5dd9d5f6>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-5dd9d5f6><span class="visually-hidden" id="doc-outline-aria-label" data-v-5dd9d5f6> Table of Contents for current page </span><ul class="root" data-v-5dd9d5f6 data-v-1188541a><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-cdc66372></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-c5936a1e><div class="content-container" data-v-c5936a1e><!--[--><!--]--><main class="main" data-v-c5936a1e><div style="position:relative;" class="vp-doc _Blogs_Web3D_three_js" data-v-c5936a1e><div><h1 id="three-js" tabindex="-1">three.js <a class="header-anchor" href="#three-js" aria-hidden="true">#</a></h1><h2 id="_1-three三要素相机-场景-几何体初始化" tabindex="-1">1.Three三要素相机,场景,几何体初始化 <a class="header-anchor" href="#_1-three三要素相机-场景-几何体初始化" aria-hidden="true">#</a></h2><p>1.引入Three.js</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#A6ACCD;"> THREE </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">three</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>2.创建<strong>场景</strong></p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 1.创建一个场景</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> scene </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Scene</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>3.初始化一个<strong>相机</strong></p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 1.创建一个相机</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> camera </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">PerspectiveCamera</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">75</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> window</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> innerWidth </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;"> window</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerHeight</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0.1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 角度,长宽比.可视近端,可视远端</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 2.相机的位置设置(x,y,z)坐标位置</span></span>
<span class="line"><span style="color:#A6ACCD;">camera</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">position</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">100</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 3.相机放在场景当中</span></span>
<span class="line"><span style="color:#A6ACCD;">scene</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(camera)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>4.初始化一个<strong>几何体</strong></p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 1.场景添加物体</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 1.1 创建 长宽高 值为1 的立方体  几何</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> geometry </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">BoxGeometry</span><span style="color:#A6ACCD;">( </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#A6ACCD;"> )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 1.2 给几何体设定材质</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> material </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">MeshBasicMaterial</span><span style="color:#A6ACCD;">( </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0x00ff00</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 1.3 根据几何体和材质创建物体</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> cube </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Mesh</span><span style="color:#A6ACCD;">( geometry</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> material )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 1.4 物体添加到场景中</span></span>
<span class="line"><span style="color:#A6ACCD;">scene</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">( cube )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>5.初始化一个**渲染器,**用来通过相机把画面渲染到</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 7.初始化渲染器</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> renderer </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">WebGL1Renderer</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 8.设置渲染的尺寸大小</span></span>
<span class="line"><span style="color:#A6ACCD;">renderer</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setSize</span><span style="color:#A6ACCD;">(window</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerWidth</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerHeight)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 9.将webgl渲染的canvas内容添加到body上</span></span>
<span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">body</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">appendChild</span><span style="color:#A6ACCD;">(renderer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">domElement)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 10.使用渲染器,通过相机将场景渲染出来</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// renderer.render(scene,camera);</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>6.创建<strong>渲染函数</strong>,每一帧渲染,</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 创建渲染函数,每一帧渲染</span></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">render</span><span style="color:#89DDFF;">(){</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">renderer</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">render</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">scene</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">camera</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 请求动画帧,JavaScript会请求上次函数执行的结果继续执行这个函数</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">requestAnimationFrame</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">render</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="_2-几何体的移动-旋转-缩放" tabindex="-1">2.几何体的移动,旋转,缩放 <a class="header-anchor" href="#_2-几何体的移动-旋转-缩放" aria-hidden="true">#</a></h2><p>移动</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 修改物体的位置</span></span>
<span class="line"><span style="color:#A6ACCD;">cube</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">position</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">cube</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">position</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">x </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span></span>
<span class="line"><span style="color:#A6ACCD;">cube</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">position</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">y </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span></span>
<span class="line"><span style="color:#A6ACCD;">cube</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">position</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">z </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>缩放</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 物体的缩放</span></span>
<span class="line"><span style="color:#A6ACCD;">cube</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">scale</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">cube</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">scale</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">x</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span></span>
<span class="line"><span style="color:#A6ACCD;">cube</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">scale</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">y </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2.5</span></span>
<span class="line"><span style="color:#A6ACCD;">cube</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">scale</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">z </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>旋转</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 物体的旋转</span></span>
<span class="line"><span style="color:#A6ACCD;">cube</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">rotation</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">40</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">XYZ</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="_3-group概念-容器" tabindex="-1">3.Group概念 容器 <a class="header-anchor" href="#_3-group概念-容器" aria-hidden="true">#</a></h2><p><strong>引入概念</strong></p><p>如果你要实现一个机器人在跑步，那么机器人的头、四肢、躯干等都是要整体移动的，<strong>group可以将一系列的mesh模型组成一个整体</strong>，这样就可以实现整体移动了。</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 创建group容器</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> group </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Group</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 创建每一个物体</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> cube1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Mesh</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">BoxGeometry</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">MeshBasicMaterial</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0xfff000</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">))</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> cube2 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Mesh</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">BoxGeometry</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">MeshBasicMaterial</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0xff0000</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">))</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> cube3 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Mesh</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">BoxGeometry</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">MeshBasicMaterial</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0xf00ff0</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">))</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 将每一个物体添加到group容器当中</span></span>
<span class="line"><span style="color:#A6ACCD;">group</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(cube1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">cube2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">cube3)</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 将容器添加到场景当中</span></span>
<span class="line"><span style="color:#A6ACCD;">scene</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(group)</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 所以我们只需要移动group 就可以实现容器里面每个物体的移动,缩放,旋转</span></span>
<span class="line"><span style="color:#A6ACCD;">group</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">position</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">group</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">scale</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">group</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">rotation</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(Math</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">XYZ</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="_4-gsap动画库" tabindex="-1">4.GSAP动画库 <a class="header-anchor" href="#_4-gsap动画库" aria-hidden="true">#</a></h2><h3 id="_4-1-什么是-gsap" tabindex="-1">4.1 什么是“GSAP”？ <a class="header-anchor" href="#_4-1-什么是-gsap" aria-hidden="true">#</a></h3><p>GreenSock 动画平台 （GSAP） 是一套行业知名的工具套件，用于<strong>超过 1100 万个</strong>网站，其中包括超过 50% 的<a href="https://www.awwwards.com/websites/gsap-animation" target="_blank" rel="noreferrer">获奖</a>网站！你可以在任何框架中使用GSAP来<strong>制作</strong> JavaScript***可以触及的几乎所有东西。***无论您是想为 UI、SVG、Three 还是 React 组件制作动画.js - <a href="https://greensock.com/why-gsap" target="_blank" rel="noreferrer">GSAP 都能满足您的需求</a>。</p><p><strong>核心库</strong>包含创建超<a href="https://greensock.com/js/speed.html" target="_blank" rel="noreferrer">快</a>、跨浏览器友好动画所需的一切。这就是我们将在本文中逐步介绍的内容。</p><p>除了核心，还有各种各样的<a href="https://greensock.com/gsap-plugins/" target="_blank" rel="noreferrer">插件</a>。<strong>您无需学习它们即可开始使用*</strong>*，但它们可以帮助解决特定的动画挑战，例如<a href="https://greensock.com/docs/v3/Plugins/ScrollTrigger" target="_blank" rel="noreferrer">基于滚动的动画</a>、<a href="https://greensock.com/docs/v3/Plugins/Draggable" target="_blank" rel="noreferrer">可拖动</a>的交互、<a href="https://greensock.com/morphsvg" target="_blank" rel="noreferrer">变形</a><a href="https://cdpn.io/pen/debug/djXzyR" target="_blank" rel="noreferrer">等。</a></p><h3 id="_4-2-使用" tabindex="-1">4.2 使用 <a class="header-anchor" href="#_4-2-使用" aria-hidden="true">#</a></h3><p>下载:</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#A6ACCD;">npm i gasp</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>引入:</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 导入动画库</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">gsap</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">gsap</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>使用:</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 设置动画</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 哪个元素(物体),移动哪个轴 多少距离,所用时间 间隔多长时间</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> animation </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> gsap</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">to</span><span style="color:#A6ACCD;">(cube</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">position</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// x轴移动10距离</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">x</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 完成动画所需时间</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">duration</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 往返运动</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">yoyo</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 延迟开启动画 单位S</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">delay</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 动画移动速率</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// ease: &quot;elastic.out(1, 0.3)&quot;, </span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 动画重复次数,无限次:-1</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">repeat</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 动画完成之后的回调</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">onComplete</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">动画完成</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 动画开始之后的回调</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">onStart</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">动画开始</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">gsap</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">to</span><span style="color:#A6ACCD;">(cube</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">rotation</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">x</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">180</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">duration</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 点击停止动画</span></span>
<span class="line"><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">dblclick</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">animation</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">animation</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">isActive</span><span style="color:#F07178;">()) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 暂停动画</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">animation</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">pause</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 恢复动画</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">animation</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">resume</span><span style="color:#F07178;">()</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br></div></div><h2 id="_2-二维平面planegeometry" tabindex="-1">2.二维平面PlaneGeometry <a class="header-anchor" href="#_2-二维平面planegeometry" aria-hidden="true">#</a></h2><h3 id="_1-planegeometry几何体介绍" tabindex="-1">1.PlaneGeometry几何体介绍 <a class="header-anchor" href="#_1-planegeometry几何体介绍" aria-hidden="true">#</a></h3><p>PlaneGeometry可以用来创建非常简单的矩形，创建这种几何体非常简单，</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> geom </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">PlaneGeometry</span><span style="color:#A6ACCD;">(width</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> height</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> widthSegments</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> heightSegments) </span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>按照如上语句便可以创建</p><p><strong>建一个简单的二维矩形平面，接下来介绍一下它的常用属性</strong></p><table><thead><tr><th><strong>属性</strong></th><th><strong>必须</strong></th><th><strong>描述</strong></th></tr></thead><tbody><tr><td>width</td><td>是</td><td>该属性指定矩形的宽度</td></tr><tr><td>height</td><td>是</td><td>该属性指定矩形的高度</td></tr><tr><td>widthSegments</td><td>否</td><td>该属性指定矩形的宽度应该分成几段</td></tr><tr><td>heightSegments</td><td>否</td><td>该属性指定矩形的高度应该分成几段</td></tr></tbody></table><ul><li>通过width属性调整平面的宽度</li><li>通过height属性调整平面的高度</li><li>通过widthSegments属性调整平面宽度分的段数</li><li>通过heightSegments属性调整平面高度分的段数&gt;</li></ul><h2 id="_3-轨道控制器" tabindex="-1">3.轨道控制器 <a class="header-anchor" href="#_3-轨道控制器" aria-hidden="true">#</a></h2><p>初始化镜头轨道控制器 OrbitControls ，通过它可以<strong>对三维场景用鼠标</strong> <strong>🖱</strong> <strong>进行缩放、平移、旋转等操作</strong>，本质上改变的不是场景，而是相机的位置参数。可以选择通过设置 <strong>controls.enableDamping</strong> 为 true 来开启控制器的<strong>移动惯性</strong>，这样在使用<strong>鼠标交互过程中就会感觉更加流畅和逼真</strong>。</p><p>第一步:</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">//导入控制器</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">OrbitControls</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">three/examples/jsm/controls/OrbitControls</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>第二步:</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 实例化控制器</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> controls </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">OrbitControls</span><span style="color:#A6ACCD;">(camera</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> renderer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">domElement)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 阻尼开启</span></span>
<span class="line"><span style="color:#A6ACCD;">controls</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">enableDamping </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="_4-textgeometry文本几何体" tabindex="-1">4.TextGeometry文本几何体 <a class="header-anchor" href="#_4-textgeometry文本几何体" aria-hidden="true">#</a></h2><h3 id="_4-1-textgeometry文本几何体介绍" tabindex="-1">4.1 TextGeometry文本几何体介绍 <a class="header-anchor" href="#_4-1-textgeometry文本几何体介绍" aria-hidden="true">#</a></h3><p>TextGeometry可以用来创建三维文本。其实是通过指定字体创建字符，然后像拉伸几何体那样把文字拉伸，继而得到三维文本。创建TextGeometry文本几何体有很多参数与ExtrudeGeometry几何体一样，具体如下：</p><table><thead><tr><th>属性</th><th>必须</th><th>描述</th></tr></thead><tbody><tr><td>size</td><td>否</td><td>该属性指定文本大小，默认值是100</td></tr><tr><td>height</td><td>否</td><td>该属性指定文本可以厚度，默认值是50</td></tr><tr><td>font</td><td>否</td><td>该属性指定文本的字体，是一个THREE.Font对象</td></tr><tr><td>bevelEnabled</td><td>否</td><td>该属性指定文本拉伸时是否启用斜角，默认false</td></tr><tr><td>bevelThickness</td><td>否</td><td>该属性指定文本拉伸体斜角厚度，默认值是10</td></tr><tr><td>bevelSize</td><td>否</td><td>该属性指定文本拉伸体斜角的高度。默认值是8</td></tr><tr><td>bevelSegments</td><td>否</td><td>该属性指定文本拉伸体斜角的分段数，段数越多斜角越光滑，默认值是3</td></tr><tr><td>curveSegments</td><td>否</td><td>该属性指定文本拉伸时拉伸曲线的分段数，段数越多曲线越光滑，默认值是4</td></tr></tbody></table><h3 id="_4-2-textgeometry文本几何体使用" tabindex="-1">4.2 TextGeometry文本几何体使用 <a class="header-anchor" href="#_4-2-textgeometry文本几何体使用" aria-hidden="true">#</a></h3><h4 id="_4-2-1-字体文件引入" tabindex="-1">4.2.1 字体文件引入 <a class="header-anchor" href="#_4-2-1-字体文件引入" aria-hidden="true">#</a></h4><p>示例中使用的是helvetiker字体，通过文件 helvetiker_regular.typeface.js导入字体，将字体文件helvetiker_regular.typeface.js 放在public/font目录下，字体文件可以在这里下载helvetiker_regular.typeface.js引入过程如下:</p><pre><code>const publicPath = p<wbr>rocess.env.BASE_URL
</code></pre><div class="language-JS line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">JS</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> textLoader </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">FontLoader</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//导入字体</span></span>
<span class="line"><span style="color:#A6ACCD;">textLoader</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">load</span><span style="color:#A6ACCD;">(</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">`${</span><span style="color:#A6ACCD;">publicPath</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">font/helvetiker_regular.typeface.js</span><span style="color:#89DDFF;">`</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#A6ACCD;font-style:italic;">font</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">	</span><span style="color:#676E95;font-style:italic;">// 这里可以获取到font就是创建文本几何体需要的字体</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>​</p><h4 id="_4-2-2-3d字体对象的创建" tabindex="-1">4.2.2 3D字体对象的创建 <a class="header-anchor" href="#_4-2-2-3d字体对象的创建" aria-hidden="true">#</a></h4><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 创建几何体	</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> geometry </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">TextGeometry</span><span style="color:#A6ACCD;">( </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Hello three.js!</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#F07178;">font</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> font</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#F07178;">size</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">80</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#F07178;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#F07178;">curveSegments</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">12</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#F07178;">bevelEnabled</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#F07178;">bevelThickness</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#F07178;">bevelSize</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">8</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#F07178;">bevelSegments</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 创建材质</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> meshMaterial </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">MeshStandardMaterial</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0xeeffff</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 创建文字网格对象</span></span>
<span class="line"><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">mesh </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Mesh</span><span style="color:#A6ACCD;">(geometry</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> meshMaterial)</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 网格对象添加到场景中</span></span>
<span class="line"><span style="color:#A6ACCD;">scene</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">mesh)</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p>​</p><h2 id="_5-阴影" tabindex="-1">5.阴影 <a class="header-anchor" href="#_5-阴影" aria-hidden="true">#</a></h2><h4 id="阴影的基本使用" tabindex="-1">阴影的基本使用 <a class="header-anchor" href="#阴影的基本使用" aria-hidden="true">#</a></h4><ol><li>材质要满足能够对光照有反应</li><li>设置渲染器开启阴影的计算 renderer.shadowMap.enabled = true;</li><li>设置光照投射阴影 directionalLight.castShadow = true;</li><li>设置物体投射阴影 sphere.castShadow = true;</li><li>设置物体接收阴影 plane.receiveShadow = true;</li></ol><p>只有三种光可以支持阴影</p><ul><li>PointLight 点光源</li><li>DirectionalLight 方向光</li><li>SpotLight 聚光灯</li></ul><p>1.设置渲染器开启阴影的计算</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 告诉我们的渲染器处理阴影映射</span></span>
<span class="line"><span style="color:#A6ACCD;">renderer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">shadowMap</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">enabled </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li></li></ol><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 设置物体投射阴影</span></span>
<span class="line"><span style="color:#A6ACCD;">sphere</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">castShadow </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="3"><li></li></ol><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 设置物体接收阴影 </span></span>
<span class="line"><span style="color:#A6ACCD;">plane</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">receiveShadow </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="4"><li></li></ol><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 设置光照投射阴影 </span></span>
<span class="line"><span style="color:#A6ACCD;">directionalLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">castShadow </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="优化阴影" tabindex="-1">优化阴影 <a class="header-anchor" href="#优化阴影" aria-hidden="true">#</a></h4><p>设置阴影贴图的分辨率</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 设置阴影贴图的分辨率 -- 提高流畅度</span></span>
<span class="line"><span style="color:#A6ACCD;">directionalLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">shadow</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mapSize</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">4096</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">4096</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>定向光摄像机助手</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 创建定向光相机助手</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> directionalLightHelper </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">CameraHelper</span><span style="color:#A6ACCD;">(directionalLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">shadow</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">camera)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">scene</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(directionalLightHelper)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>关闭定向光摄像机助手</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#A6ACCD;">directionalLightHelper</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">visible </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>修改物体距离光相机的距离</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 修改定向光相机 距离物体的距离</span></span>
<span class="line"><span style="color:#A6ACCD;">directionalLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">shadow</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">camera</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">near </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0.5</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 光所到达的最远距离</span></span>
<span class="line"><span style="color:#A6ACCD;">directionalLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">shadow</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">camera</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">far </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">16</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 这下面四个值的正数一定要相等且对称</span></span>
<span class="line"><span style="color:#A6ACCD;">directionalLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">shadow</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">camera</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">top </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">directionalLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">shadow</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">camera</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">bottom </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">directionalLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">shadow</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">camera</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">left </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">directionalLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">shadow</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">camera</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">right </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>设置阴影贴图模糊度</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 设置阴影贴图模糊度</span></span>
<span class="line"><span style="color:#A6ACCD;">directionalLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">shadow</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">radius </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">20</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>设置阴影贴图的类型 这里采用的是PCF软阴影(边缘更好看-更丝滑)</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 设置阴影贴图的类型 这里采用的是PCF软阴影</span></span>
<span class="line"><span style="color:#A6ACCD;">renderer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">shadowMap</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">type </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">PCFShadowMap</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="聚光灯-spotlight" tabindex="-1">聚光灯-SpotLight <a class="header-anchor" href="#聚光灯-spotlight" aria-hidden="true">#</a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 环境光</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> light </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">AmbientLight</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0xffffff</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0.5</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// soft white light</span></span>
<span class="line"><span style="color:#A6ACCD;">scene</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(light)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//直线光源</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> spotLight </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">SpotLight</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0xffffff</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">spotLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">position</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">spotLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">castShadow </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">spotLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">intensity </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 添加光相机助手</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> spotLightHelper </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">CameraHelper</span><span style="color:#A6ACCD;">(spotLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">shadow</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">camera)</span></span>
<span class="line"><span style="color:#A6ACCD;">scene</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(spotLightHelper)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 设置阴影贴图模糊度</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// spotLight.shadow.radius = 20;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 设置阴影贴图的分辨率</span></span>
<span class="line"><span style="color:#A6ACCD;">spotLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">shadow</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mapSize</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1024</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1024</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// console.log(directionalLight.shadow);</span></span>
<span class="line"><span style="color:#A6ACCD;">spotLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> sphere</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 角度</span></span>
<span class="line"><span style="color:#A6ACCD;">spotLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">angle </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Math</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">PI </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">6</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 距离</span></span>
<span class="line"><span style="color:#A6ACCD;">spotLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">distance </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 明暗交界处</span></span>
<span class="line"><span style="color:#A6ACCD;">spotLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">penumbra </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 光的强弱</span></span>
<span class="line"><span style="color:#A6ACCD;">spotLight</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">decay </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">scene</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(spotLight)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">gui</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(sphere</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">position</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">x</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">min</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">max</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">step</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0.1</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">gui</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(spotLight</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">angle</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">min</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">max</span><span style="color:#A6ACCD;">(Math</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">PI </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">step</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0.01</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">name</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">角度</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">gui</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(spotLight</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">distance</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">min</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">max</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">10</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">step</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0.01</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">name</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">距离</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">gui</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(spotLight</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">penumbra</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">min</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">max</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">step</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0.01</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">name</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">明暗交界处</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">gui</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(spotLight</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">decay</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">min</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">max</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">step</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0.01</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">name</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">光的强弱</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h3 id="点光源-pointlight" tabindex="-1">点光源 -PointLight <a class="header-anchor" href="#点光源-pointlight" aria-hidden="true">#</a></h3><h2 id="物理库cannon-js的使用" tabindex="-1">物理库cannon.js的使用 <a class="header-anchor" href="#物理库cannon-js的使用" aria-hidden="true">#</a></h2><h3 id="_1-基本使用" tabindex="-1">1.基本使用 <a class="header-anchor" href="#_1-基本使用" aria-hidden="true">#</a></h3><p>下载</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#A6ACCD;">npm i cannon</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>引入</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#A6ACCD;"> CANNON </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">cannon-es</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>创建</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 初始化Cannon中的物理世界World</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> world </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> CANNON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">World</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>添加重力</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 物理世界中是要有重力加速度的，需要为其设定大小及方向：</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 设置物理世界中的重力，设置为y轴负方向的-9.8 m/s²，模拟真实世界</span></span>
<span class="line"><span style="color:#A6ACCD;">world</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">gravity</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">9.82</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>在物理世界添加物体</p><p>Box , Cylinder , Plane , Sphere , Etc</p><p><strong>第一步,确定形状 :</strong></p><p>相当于threejs里面的==BoxGeometry==几何体</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 创建球体 只有一个参数 radius 就是半径 值为数字</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> shape </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> CANNON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Sphere</span><span style="color:#A6ACCD;">(radius)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>第二步,添加body :</strong></p><p>相当于ThreeJS 里面==MeshBasicMaterial==几何体材质</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#A6ACCD;">   </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> body </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> CANNON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Body</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">mass</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> CANNON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Vec3</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">shape</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> shape</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">material</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> defaultMaterial</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><ul><li>mass : 弹性运动的主要属性： 质量(<strong>mass</strong>)是安装在弹簧的端部的物体的重量或分量。 伸展系数(stiffness)是弹性运动的困难度，这通常对应于它的厚度，以及如何紧密它盘绕。</li><li>position : 位置 三维向量x,y,z</li><li>shape : 形状</li><li>material</li></ul><p><strong>第三步,将物体添加到物理世界world中</strong></p><p>相当于ThreeJs将物体添加到场景中</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#A6ACCD;">world</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addBody</span><span style="color:#A6ACCD;">(body)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><strong>第四步,更新物理世界渲染</strong></p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> clock </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> THREE</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Clock</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> oldElapsedTime </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> tick </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">elapsedTime</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">clock</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElapsedTime</span><span style="color:#F07178;">()</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">deltaTime</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">elapsedTime</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">oldElapsedTime</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">oldElapsedTime</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">elapsedTime</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// Update physics</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">//第一个参数:设置更新物理世界cannon.world的步长timestep，这里选用60Hz的速度，即1.0 / 60.0：</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">world</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">step</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">1</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">/</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">60</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">deltaTime</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3</span><span style="color:#F07178;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="_2-copy方法" tabindex="-1">2.copy方法 <a class="header-anchor" href="#_2-copy方法" aria-hidden="true">#</a></h3><p>之前</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;">	</span><span style="color:#676E95;font-style:italic;">// 将物理世界物体的坐标同步传给Threejs物体</span></span>
<span class="line"><span style="color:#A6ACCD;">	object</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mesh</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">position</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">x </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> object</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">body</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">position</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">x</span></span>
<span class="line"><span style="color:#A6ACCD;">	object</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mesh</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">position</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">y </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> object</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">body</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">position</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">y</span></span>
<span class="line"><span style="color:#A6ACCD;">	object</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mesh</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">position</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">z </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> object</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">body</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">position</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">z</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>现在copy()</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#A6ACCD;"> 	object</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mesh</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">position</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">copy</span><span style="color:#A6ACCD;">(object</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">body</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">position)</span></span>
<span class="line"><span style="color:#A6ACCD;">	object</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mesh</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">quaternion</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">copy</span><span style="color:#A6ACCD;">(object</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">body</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">quaternion)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="_3-两个物体接触之间的碰撞" tabindex="-1">3.两个物体接触之间的碰撞 <a class="header-anchor" href="#_3-两个物体接触之间的碰撞" aria-hidden="true">#</a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> concreteMaterial </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> CANON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Material</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">concrete</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> plasticMaterial </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> CANNON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Material</span><span style="color:#A6ACCD;">( </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">plastic</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> conctePlasticContactMaterial </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> CANON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">ContactMaterial</span><span style="color:#A6ACCD;">(</span></span>
<span class="line"><span style="color:#A6ACCD;">    concreteMaterial</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    plasticMaterial</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//摩擦力</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">friction</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0.1</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 归还</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">restitution</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0.7</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;"> )</span></span>
<span class="line"><span style="color:#A6ACCD;">world</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addContactMaterial</span><span style="color:#A6ACCD;">(concretePlasticContactMaterial) </span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>小球(塑料)</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#A6ACCD;">   </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> body </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> CANNON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Body</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">mass</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> CANNON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Vec3</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">shape</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> shape</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">material</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> plasticMaterial</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">   world</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addBody</span><span style="color:#A6ACCD;">( sphereBody)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>地板(混凝土)</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// Floor</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> floorShape </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> CANNON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Plane</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> floorBody </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> CANINON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Body</span><span style="color:#A6ACCD;">( )</span></span>
<span class="line"><span style="color:#A6ACCD;">fLoorBody</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">material </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> concreteMaterial </span></span>
<span class="line"><span style="color:#A6ACCD;">floorBody</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mass </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span></span>
<span class="line"><span style="color:#A6ACCD;">floorBody</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addShape</span><span style="color:#A6ACCD;">(floorShape)</span></span>
<span class="line"><span style="color:#A6ACCD;">floorBody</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">quaternion</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">setFromAxisAngle</span><span style="color:#A6ACCD;">( </span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> CANNON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Vec3</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">	Math</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">PI </span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0.5</span></span>
<span class="line"><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">world</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">addBody</span><span style="color:#A6ACCD;">(floorBody)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>以下代码是对上面的优化 减少代码量</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// Default material</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> defaultMaterial </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> CANNON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Material</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">default</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> defaultContactMaterial </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> CANNON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">ContactMaterial</span><span style="color:#A6ACCD;">(</span></span>
<span class="line"><span style="color:#A6ACCD;">    defaultMaterial</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    defaultMaterial</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">friction</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0.1</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">restitution</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0.7</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">world</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">defaultContactMaterial </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> defaultContactMaterial</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="_4-施加力的作用在物体上面" tabindex="-1">4.施加力的作用在物体上面 <a class="header-anchor" href="#_4-施加力的作用在物体上面" aria-hidden="true">#</a></h3><p>applyLocalForce()</p><ul><li>第一个参数,力的方向以及力度</li><li>第二个参数,受力物体的坐标</li></ul><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#A6ACCD;">sphereBody</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">applyLocalForce</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> CANNON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Vec3</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">150</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> CANNON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">Vec3</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">))</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="glsl语言-学习" tabindex="-1">GLSL语言 - 学习 <a class="header-anchor" href="#glsl语言-学习" aria-hidden="true">#</a></h2><p><a href="https://so.csdn.net/so/search?q=OpenGL&amp;spm=1001.2101.3001.7020" target="_blank" rel="noreferrer">OpenGL</a>着色语言（OpenGL Shading Language）是用来在OpenGL中着色编程的语言，它是一种类C语言，下面先学习一下基础语法。</p><h2 id="日志" tabindex="-1">日志 <a class="header-anchor" href="#日志" aria-hidden="true">#</a></h2><p>没有控制台，因此无法记录值。这是因为代码针对每个顶点和每个片段执行。记录一个值是没有意义的。</p><h2 id="缩进" tabindex="-1">缩进 <a class="header-anchor" href="#缩进" aria-hidden="true">#</a></h2><p>缩进不重要，可以随意。</p><h2 id="分号" tabindex="-1">分号 <a class="header-anchor" href="#分号" aria-hidden="true">#</a></h2><p>任何指令的结尾都需要分号。哪怕忘记一个分号都可能导致编译错误，使得整个材料都不起作用。</p><h2 id="变量" tabindex="-1">变量 <a class="header-anchor" href="#变量" aria-hidden="true">#</a></h2><p>GLSL是一种强类型语言，如C语言一般。</p><p><strong>不能</strong>在操作中混合使用<code>float</code>和<code>int</code>，会报错</p><div class="language-glsl line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">glsl</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">float</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1.0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">int</span><span style="color:#A6ACCD;"> b </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">float</span><span style="color:#A6ACCD;"> c </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;"> b</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>但是可以通过类型转换进行操作：</p><div class="language-glsl line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">glsl</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">float</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1.0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">int</span><span style="color:#A6ACCD;"> b </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">float</span><span style="color:#A6ACCD;"> c </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">float</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">b</span><span style="color:#89DDFF;">);</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="vector-2" tabindex="-1">Vector 2 <a class="header-anchor" href="#vector-2" aria-hidden="true">#</a></h3><p>如果我们想存储具有x和y属性的2个坐标这样的值，我们可以使用<code>vec2</code></p><div class="language-glsl line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">glsl</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">vec2</span><span style="color:#A6ACCD;"> foo </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">vec2</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">1.0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2.0</span><span style="color:#89DDFF;">);</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>空的vec2将导致错误：</p><div class="language-glsl line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">glsl</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">vec2</span><span style="color:#A6ACCD;"> foo </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">vec2</span><span style="color:#89DDFF;">();</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>我们可以在创建vec2后更改这些属性：</p><div class="language-glsl line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">glsl</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">vec2</span><span style="color:#A6ACCD;"> foo </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">vec2</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">0.0</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">foo.x </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1.0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">foo.y </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2.0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>执行vec2与浮点相乘等操作将同时操作x和y属性：</p><div class="language-glsl line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">glsl</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">vec2</span><span style="color:#A6ACCD;"> foo </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">vec2</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">1.0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2.0</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">foo </span><span style="color:#89DDFF;">*=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2.0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="vector-3" tabindex="-1">Vector 3 <a class="header-anchor" href="#vector-3" aria-hidden="true">#</a></h3><p>vec3与vec2类似，但具有第三个名为z的属性。当需要3D坐标时，使用它非常方便：</p><div class="language-glsl line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">glsl</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">vec3</span><span style="color:#A6ACCD;"> foo </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">vec3</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">0.0</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#C792EA;">vec3</span><span style="color:#A6ACCD;"> bar </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">vec3</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">1.0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2.0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3.0</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">bar.z </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">4.0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>虽然我们可以使用x、y和z，但我们也可以使用r、g和b。这只是语法糖，结果完全一样。当我们使用vec3存储颜色时，它非常有效：</p><div class="language-glsl line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">glsl</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">vec3</span><span style="color:#A6ACCD;"> purpleColor </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">vec3</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">0.0</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">purpleColor.r </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0.5</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">purpleColor.b </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1.0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>vec3可以通过部分使用vec2来创建：</p><div class="language-glsl line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">glsl</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">vec2</span><span style="color:#A6ACCD;"> foo </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">vec2</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">1.0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2.0</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#C792EA;">vec3</span><span style="color:#A6ACCD;"> bar </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">vec3</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">foo</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3.0</span><span style="color:#89DDFF;">);</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>我们也可以使用vec3的一部分来生成vec2：</p><div class="language-glsl line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">glsl</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">vec3</span><span style="color:#A6ACCD;"> foo </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">vec3</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">1.0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2.0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3.0</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#C792EA;">vec2</span><span style="color:#A6ACCD;"> bar </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> foo.xy</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="vector-4" tabindex="-1">Vector 4 <a class="header-anchor" href="#vector-4" aria-hidden="true">#</a></h3><p>最后，vec4的原理与前两个类似，但第四个值命名为<code>w</code>或<code>a</code>(颜色alpha)</p><div class="language-glsl line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">glsl</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">vec4</span><span style="color:#A6ACCD;"> foo </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">vec4</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">1.0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2.0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3.0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">4.0</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#C792EA;">vec4</span><span style="color:#A6ACCD;"> bar </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">vec4</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">foo.zw</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">vec2</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">5.0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">6.0</span><span style="color:#89DDFF;">));</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>还有其他类型的变量，如mat2、mat3、mat4或sampler2D，我们将在后面看到这些变量。</p><table><thead><tr><th>在着色器内，一般命名以gl_开头的变量是着色器的内置变量，除此之外webgl_和_webgl还是着色器保留字，自定义变量不能以webgl_或_webgl开头。变量声明一般包含&lt;存储限定符&gt;&lt;数据类型&gt;&lt;变量名称&gt;，以attribute vec4 a_Position为例，attribute表示存储限定符，vec是数据类型，a_Position为变量名称。</th></tr></thead></table><h2 id="原生函数" tabindex="-1">原生函数 <a class="header-anchor" href="#原生函数" aria-hidden="true">#</a></h2><p>GLSL有许多内置的经典函数，如sin、cos、max、min、pow、exp、mod、clamp，也有非常实用的函数，如cross、dot、mix、step、smoothstep、length、distance、reflect、refract、normalize。</p><p>不幸的是，没有对初学者友好的文档，而且大多数时候，我们在网络上进行搜索，结果通常出现在以下网站：</p><p>Kronos Group OpenGL reference pages：本文档涉及OpenGL，但您将看到的大多数标准函数都与WebGL兼容。不要忘了WebGL只是一个访问OpenGL的JavaScript API。 Book of shaders documentation：《Book of shaders》主要关注片元着色器，与Three.js无关。但是这是一个很好的学习资源，它有自己的词汇表。</p><h2 id="内置函数" tabindex="-1">内置函数 <a class="header-anchor" href="#内置函数" aria-hidden="true">#</a></h2><h3 id="_1-step" tabindex="-1">1.step() <a class="header-anchor" href="#_1-step" aria-hidden="true">#</a></h3><p>这个图案看起来是基于上一个图案，但是图案颜色值要么是 <code>0.0</code> 要么是 <code>1.0</code>，而不是渐变色。在 <code>GLSL</code> 中可以使用 <code>if</code> 条件判断语句来实现这一效果，但是应该避免使用条件判断语句以避免性能问题。我们可以使用 <code>step(edge, value)</code> 方法来实现这个功能，它接收两个参数：<code>edge</code> 表示一个临界值，第二个参数 <code>value</code> 是传入的参数，当传入参数小于临界值时，该方法返回 <code>0.0</code>，当传入参数大于临界值时，该方法返回 <code>1.0</code></p><div class="language-glsl line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">glsl</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">float</span><span style="color:#A6ACCD;"> strength </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">mod</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">vUv.y </span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10.0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1.0</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">strength </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">step</span><span style="color:#89DDFF;">(</span><span style="color:#F78C6C;">0.5</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> strength</span><span style="color:#89DDFF;">);</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="_2-mod-模运算" tabindex="-1">2.mod() 模运算 <a class="header-anchor" href="#_2-mod-模运算" aria-hidden="true">#</a></h3><p>现在我们来实现这种重复的渐变效果，此时需要用到<strong>模运算</strong>，模运算返回两数之间的余数，如：</p><ul><li><code>0.8</code> 模 <code>1.0</code> 值为 <code>0.8</code></li><li><code>1.2</code> 模 <code>1.0</code> 值为 <code>0.2</code></li></ul><p>在多数语言中，我们通常使用 <code>%</code> 运算符进行模运算，但是在 <code>GLSL</code> 中需要使用 <code>mod()</code> 方法。</p><div class="language-glsl line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">glsl</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">float</span><span style="color:#A6ACCD;"> strength </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">mod</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">vUv.y </span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10.0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1.0</span><span style="color:#89DDFF;">);</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="_3-abs-区域取值" tabindex="-1">3.abs()区域取值 <a class="header-anchor" href="#_3-abs-区域取值" aria-hidden="true">#</a></h3><p>来看看另一个例子，为了得到下面的结果，我们需要给 <code>vUv.x</code>设置一个偏移量，使它的值保持在 <code>-0.5</code> 到 <code>0.5</code> 之间。然后我们需要它的值始终是正数，也就是它的值从 <code>0.5</code> 变化到 <code>0.0</code> 再变化到 <code>0.5</code>。为了实现这一功能，我们可以使用 <code>abs(...)</code> 方法。</p><div class="language-glsl line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">glsl</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">float</span><span style="color:#A6ACCD;"> strength </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">abs</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">vUv.x </span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0.5</span><span style="color:#89DDFF;">);</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-c5936a1e data-v-2813752b><div class="edit-info" data-v-2813752b><div class="edit-link" data-v-2813752b><a class="VPLink link edit-link-button" href="https://github.com/vuejs/vitepress/edit/main/docs/Web3D/three.js.md" target="_blank" rel="noreferrer" data-v-2813752b data-v-a8b5c975><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" data-v-2813752b><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page on GitHub<!--]--><!----></a></div><!----></div><div class="prev-next" data-v-2813752b><div class="pager" data-v-2813752b><!----></div><div class="pager" data-v-2813752b><a class="pager-link next" href="../whyVitePress/index.html" data-v-2813752b><span class="desc" data-v-2813752b>下一篇</span><span class="title" data-v-2813752b>介绍</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-93a960b4 data-v-d24360a6><div class="container" data-v-d24360a6><p class="message" data-v-d24360a6>Released under the MIT License.</p><p class="copyright" data-v-d24360a6>Copyright © 2023-present 孙飞</p></div></footer><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"cssstudy_cssdaoying.md\":\"b5a55bb5\",\"html_rearrange-and-redraw.md\":\"79b82326\",\"phototips_1.md\":\"5442fcc8\",\"cssstudy_boxmodel.md\":\"a39c296d\",\"jsstudy_fd-and-jieliu.md\":\"82484a67\",\"article_2022.5.2.md\":\"09de87d8\",\"whyvitepress_index.md\":\"3a2552ae\",\"html_semantictagging.md\":\"fc6888d6\",\"index.md\":\"428f6a9b\",\"dailylife_2023-03.md\":\"c3a9e15d\",\"phototips_2.md\":\"03ecbbde\",\"article_index.md\":\"33d0c092\",\"jslibrary_gsap.md\":\"afb98632\",\"cssstudy_boxjuzhong.md\":\"76f00e08\",\"whyvitepress_start.md\":\"9a284dac\",\"toolweb_index.md\":\"1046e2cd\",\"vscodechajian_index.md\":\"b3548914\",\"vuestudy_1.md\":\"013d73d7\",\"jsstudy_konweltype.md\":\"5e5dbe13\",\"html_index.md\":\"02904cef\",\"cssstudy_flex.md\":\"1983cb54\",\"jsstudy_array.md\":\"93ea04d7\",\"cssstudy_cssoptimization.md\":\"ee5e6100\",\"about_index.md\":\"b2a49978\",\"jsstudy_3-7-objectdeconstruction.md\":\"38a437aa\",\"web3d_three.js.md\":\"f20abcae\",\"vuestudy_vue.md\":\"6905633f\",\"mysqlstudy_mysql.md\":\"113ea88e\"}")</script>
    <script type="module" async src="/Blogs/assets/app.2f47ee87.js"></script>
    
  </body>
</html>